<template>
    <div class="app-container h-auto min-h-full">
        <ul class="space-y-5">
            <li>
                <vxe-tip title="图标选择" status="primary">
                    @/icon/svg 路径下的所有svg图标
                </vxe-tip>
                <y-icon-picker v-model="icon"></y-icon-picker>
            </li>

            <li>
                <vxe-tip title="添加新图标" status="primary">
                    <ul class="space-y-2">
                        <li>1. 点击 <el-link type="primary" href="https://www.iconfont.cn/">iconfont</el-link> 搜索需要的图标
                        </li>
                        <li>2. 点击右侧图片
                            <el-image fit="cover" class="w-24 h-24 border" :src="iconStep"
                                :preview-src-list="[iconStep]">
                                .

                            </el-image>
                        </li>
                        <li>3. 在 <strong>@/icon/svg</strong> 目录下新建一个<strong>svg</strong>文件，命名格式为（svg名称规定为英文字母，多个英文以-连接
                            例如 user-add）,将复制的svg代码粘贴到文件里</li>
                    </ul>
                </vxe-tip>
            </li>
            <li>
                <vxe-tip status="primary">
                    修改图标样式
                    <p>
                    <pre>
{{ styleCode }}
                    </pre>
                    </p>
                </vxe-tip>
                <ul>
                    <li class="space-x-5">
                        <svg-icon icon-class="apps" color="rgb(158,245,88)" size="2"></svg-icon>
                        <svg-icon icon-class="vxe-icon-chart-bar-x" color="green" size="2.5"></svg-icon>
                        <svg-icon icon-class="el-icon-platform-eleme" color="#f40" size="3"></svg-icon>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import YIconPicker from "@/components/YIconPicker";
import iconStep from "@/assets/public_images/icon-step.png"

export default {
    components: { YIconPicker },
    data() {
        return {
            iconStep,
            icon: 'user',
            styleCode: `
<svg-icon icon-class="apps" color="rgb(158,245,88)" size="2"></svg-icon>
<svg-icon icon-class="vxe-icon-chart-bar-x" color="green" size="2.5"></svg-icon>
<svg-icon icon-class="el-icon-platform-eleme" color="#f40" size="3"></svg-icon>`
        }
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped></style>